<template>
	<div>
		<div class="userInfoContent clear_blth">
			<div class="uploadFile">
				<div class="previewImage">
					<img :src="imageUrl" />
				</div>
				<div class="uploadInput">
					<el-upload class="upload-demo" action="" :show-file-list="false" :before-upload="beforeAvatarUpload">
						<el-button size="small" type="primary" style="width: 120px;margin-top: 5px;">点击上传</el-button>
					</el-upload>
				</div>
			</div>
			<div class="userInfo">
				
			</div>
		</div>
	</div>
</template>

<style>
	.userInfoContent {
		width: 100%;
		background: palegreen;
	}
	
	.uploadFile {
		float: right;
		width: 200px;
		height: 200px;
		margin-top: 25px;
		text-align: center;
	}
	
	.uploadFile .previewImage {
		display: inline-block;
		width: 120px;
		height: auto;
	}
	
	.uploadFile .previewImage img {
		display: inline-block;
		max-width: 100%;
		height: auto;
		padding: 4px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		-webkit-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
	
	.userInfo {
		width: 810px;
		height: 500px;
		float: left;
	}
</style>

<script type="text/ecmascript-6">
	import axios from "axios"
	export default {
		data() {
			return {
				imageUrl: "../../static/images/employee_default.png",
				param: {}
			};
		},
		components: {

		},
		methods: {
			beforeAvatarUpload(file) {
				//创建临时的路径来展示图片
				var windowURL = window.URL || window.webkitURL;

				this.imageUrl = windowURL.createObjectURL(file);
				//重新写一个表单上传的方法
				this.param = new FormData();
				this.param.append('file', file, file.name);
				this.param.file = file;
				this.uploadAvatarImage();
				return false;
			},
			uploadAvatarImage() {
				var config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				axios.post("/users/addPicture", this.param, config).then((response) => {});
			}
		}
	}
</script>